<template>
  <view class="wrap">
    <image src="../../static/homeBg.png" class="homeBg"></image>
    <view class="pox">
      <uv-navbar leftText="" :fixed="false" title="全部课程" leftIconColor='#FFF' bgColor='rgba(0,0,0,0)' safeAreaInsetTop placeholder autoBack titleStyle='color: #FFFFFF'></uv-navbar>
      <view class="tab">
        <uv-tabs :list="tabList" :current='current' :scrollable='tabList.length > 4' inactiveStyle='font-weight: 400; font-size: 28rpx; color: #FFFFFF;' activeStyle='font-weight: 500; font-size: 28rpx; color: #FFFFFF;' itemStyle='padding: 10rpx 25rpx' lineWidth='76rpx' lineHeight='12rpx' lineColor='rgba(255,255,255,.6)' @click="tabClick"></uv-tabs>
      </view>
    </view>
    <view class="lineHeight" :style="`height: ${height}px`"></view>
    <view class="list">
      <view class="myClass" :style="`height: ${win - height - 30}px`" v-if="showPage">
        <template v-if="list.length">
          <scroll-view scroll-y="true"  :style="`height: ${win - height - 30}px`">
            <course :detail='item' v-for="(item, index) in list" :key="index"></course>
          </scroll-view>
        </template>
        <uv-empty :show='showLeng' mode="list" marginTop='200rpx'></uv-empty>
      </view>
    </view>
  </view>
</template>

<script setup>
import course from '../../components/lesearch/course.vue';
import { ref, getCurrentInstance } from 'vue';
import { get } from '@/api';
import { onLoad } from '@dcloudio/uni-app';

const { ctx } = getCurrentInstance();
const sys = uni.$uv.sys();
const win = sys.windowHeight;
let height = ref(0);
let tabList = ref([]);
let current = ref(0);
let list = ref([]);
let last_page = 0;
let page = 1;
let showLeng = ref(false);
let showPage = ref(false);

onLoad(() => {
  getLessonCategories();
})

function getLessonCategories(){
  get('/api/lesson/getLessonCategories').then(res => {
    if(res.code == 1){
      const data = res.data;
      tabList.value = data;
      getList(data[0].id);
    }
  })
}
function getList(id){
  const params = {
    page,
    pagePer: 15,
    categoryId: id
  }
  get('/api/lesson/getLessons', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
      getElement();
    }
  })
}
function getElement(){
  ctx.$uv.getRect('.pox').then(res => {
    height.value = res.height;
    showPage.value = true;
  })
}
function tabClick(row){
  page = 1;
  list.value = [];
  getList(row.id);
}
</script>

<style lang="scss" scoped>
  .list{
    padding: 0 30rpx;
    position: relative;
    z-index: 3;
  }
  .myClass{
    background-color: #fff;
    padding: 30rpx;
    border-radius: 20rpx;
    overflow: hidden;
  }
  .pox{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 2;
    .tab{
      padding: 30rpx 0;
    }
  }
  .lineHeight{
    width: 100%;
    position: relative;
    z-index: 1;
  }
  .homeBg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
</style>